<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>APP新手引导</title>
<script type="text/javascript" src="<?php echo TEMPLATES_PATH;?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATES_PATH;?>/js/iscroll.js"></script>

   <!-- <script type="text/javascript" src="<?php /*echo TEMPLATES_PATH;*/?>/js/hbuilder/mui.min.js"></script>
    <script type="text/javascript" src="<?php /*echo TEMPLATES_PATH;*/?>/js/config.js"></script>
    <script type="text/javascript" src="<?php /*echo TEMPLATES_PATH;*/?>/js/hbuilder/common.js"></script>
    <script type="text/javascript" src="<?php /*echo TEMPLATES_PATH;*/?>/js/hbuilder/piclick.js"></script>-->

    <script>
        $(function(){
            var h = $('img');
            var device_h = $(window).height();
            var device_w = $(window).width();
            h.height(device_h);
            var span_w = $('.enter-index').innerWidth();
            var span_h = $('.enter-index').innerHeight();
            $('.enter-index').css({'left':device_w/2-span_w/2,'top':device_h/2-span_h/2});
        });
    </script>
<style>
    *{ margin:0px; padding:0px;}
    .wraper{width:100%;margin:0 auto;}
    .scroll_pic_view ul{
        white-space: nowrap;
        overflow: hidden;
    }
    .scroll_pic_view ul li{
        overflow: hidden;
        float:left;
        list-style:none;
    }
    .scroll_pic_view ul li img{
        width:100%;
        height:auto;
    }
    #scroll_pic_view_div{width: 3840px; -webkit-transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px);}
    #scroll_pic_view_div li a{}
.enter-index{color:white;position:absolute;padding:20px;display:inline-block;border:white 1px solid;border-radius:10px;}
</style>
    </head>
<html>
<div class="wraper">
  <header id="scroll_pic_view" class="scroll_pic_view" style="overflow: hidden; ">
    <div id="scroll_pic_view_div">
      <ul>
        <li><img src="<?php echo TEMPLATES_PATH;?>/images/appintro/a.jpg"></li>
        <li><img src="<?php echo TEMPLATES_PATH;?>/images/appintro/b.jpg"></li>
        <li><img src="<?php echo TEMPLATES_PATH;?>/images/appintro/c.jpg"></li>
        <li><img src="<?php echo TEMPLATES_PATH;?>/images/appintro/d.jpg"></li>
        <li><img src="<?php echo TEMPLATES_PATH;?>/images/appintro/e.jpg"></li>
          <a href="index.php" onclick=""> <li style="position:relative"><img src="<?php echo TEMPLATES_PATH;?>/images/appintro/f.jpg"><span class="enter-index">点击进入首页</span>
        </li></a>
      </ul>
    </div>
  </header>
</div>
<script>
    (function(d, $){
        var scrollPicView = d.getElementById("scroll_pic_view"),
            scrollPicViewDiv = d.getElementById("scroll_pic_view_div"),
            lis = scrollPicViewDiv.querySelectorAll("li"),
            w = scrollPicView.offsetWidth;
            len = lis.length;
        for(var i=0; i<len; i++){
            lis[i].style.width = w+"px";
            if(i == len-1){
                scrollPicViewDiv.style.width = w * len + "px";//alert(i)
            }
        }

        var scroll_pic_view = new iScroll('scroll_pic_view', {
            snap: true,
            momentum: false,
            hScrollbar: false,
            onScrollEnd: function() {
            }
        });
        var nav_lis = new Array(lis.length);
    })(document, $);
</script>
<!--效果html结束-->
</html>
